<template>
  <div class="margin-top-xl text-center">
    <div style="display: inline-block;">
      <el-form ref="form" :model="serch_list1" label-width="80px">
        <el-form-item label="住宿时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择开始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
              v-model="serch_list1.in_time" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
              v-model="serch_list1.out_time" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="房间类型">
          <el-radio-group v-model="serch_list1.commodity_id">
            <el-radio label="所有类型">类型不限</el-radio>
            <el-radio label="单人房间"></el-radio>
            <el-radio label="双人房间"></el-radio>
            <el-radio label="豪华房间"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="价格区间">
          <el-radio-group v-model="serch_list1.price">
            <el-radio label="0-99999">价格不限</el-radio>
            <el-radio label="0-100"></el-radio>
            <el-radio label="100-200"></el-radio>
            <el-radio label="200-300"></el-radio>
            <el-radio label="300-99999">300以上</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即搜索</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      serch_list: {
        type: Object,
        default: function() {
          return {
            "in_time": "2021-4-15",
            "out_time": "2021-4-21",
            "commodity_id": "所有类型",
            "price": "0-99999"
          }
        }
      }
    },
    data() {
      return {
        serch_list1: this.serch_list,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
        },
        value2: ''
      }
    },
    methods: {
      onSubmit() {
        this.$emit("update:serch_list", this.serch_list1)
        this.$emit('serch_room');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
